<template>
	<view class="home-box left clearfix">
		<view class="home-mianbao-box left clearfix">
			账号设置
		</view>
		
		<view class="home-list-box left clearfix">
			<!--头像-->
			<view class="edit-header-box left clearfix">
				<view class="edit-header-content left clearfix">
					<image :src="userinfo.avatar||'https://mp-2298d5e4-aa54-4efc-a8b7-bbb75295a007.cdn.bspapp.com/cloudstorage/6f868768-e126-4020-9098-fe37670e2488.jpg'" mode="aspectFill" style="width:100%;height:100%;border-radius: 50%;"></image>
				</view>
				
				<view class="edit-header-text left">
					<label @click="editAvatar()">修改头像</label>
				</view> 
				
				
			</view>
			
			<view class="edit-content left clearfix">
				
				
				<view class="edit-item left clearfix">
					<view class="edit-title left">昵称：</view>
					<view class="edit-input left"><input v-model="userinfo.nickname" @blur="saveEditNickname()" :style="editNicknameDisabled==true?'border:none':'border:1px solid #94bcff;'" placeholder="请输入昵称" :disabled="editNicknameDisabled" /></view>
					<view class="edit-icon left" @click="editNickname()" title="修改昵称">
						<uni-icons type="icon-chuangzuo5" custom-prefix="iconfont" size="20" color="#2979ff"></uni-icons>
					</view>
				</view>
				
				<view class="edit-item left clearfix">
					<view class="edit-title left">手机号码：</view>
					<view class="edit-input left"><input v-model="userinfo.mobile" placeholder="请输入手机号码" :disabled="true" /></view>
					<view class="edit-icon left"  @click="editMobile()" title="修改手机号码">
						<uni-icons type="icon-chuangzuo5" custom-prefix="iconfont" size="20" color="#2979ff"></uni-icons>
					</view>
				</view>
				
				<view class="edit-item left clearfix">
					<view class="edit-title left">魔点：</view>
					<view class="edit-input left">{{userinfo.drop_number||0}}</view>
					<view class="edit-icon left" style="color:#2979ff;padding-left:20px;" @click="setShowMoney()">
						充值
					</view>
				</view>
				
				
				<view class="edit-item left clearfix">
					<view class="edit-title left">积分：</view>
					<view class="edit-input left">{{userinfo.score||0}}</view>
					<view class="edit-icon left" style="color:#2979ff;padding-left:20px;">
						
					</view>
				</view>
				
				
				<view class="edit-item left clearfix">
					<view class="edit-title left">注册时间：</view>
					<view class="edit-input left"><uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="userinfo.register_date"></uni-dateformat></view>
					<view class="edit-icon left" style="color:#2979ff;padding-left:20px;">
						
					</view>
				</view>
				
				
				
			</view>
		</view>
		
		<zmt-avatar-cropper @close="updateShowCrop" @confirm="uploadSuccess" :isShow="showCrop" :imageSrc="imageSrc"></zmt-avatar-cropper>
		<zmt-send-code @confirm="confirmUpdateMobile" :show="showMobile" @close="setClose"></zmt-send-code>
		<zmt-deposit-money :userinfo="userinfo" @close="setCloseMoney" :show="showMoney"></zmt-deposit-money>
	</view>
</template>


<style scoped>
	.edit-input,.edit-input input{width:195px;height:50px;line-height:50px;font-size:15px;color:#666;}
	.edit-input input{height:30px;line-height:30px;margin-top:10px;border-radius: 3px;padding-left:5px;}
	.edit-title,.edit-icon{width:90px;height:30px;line-height:30px;padding-left:30px;font-size:15px;color:#999;cursor: pointer;margin-top:10px;}
	.edit-item{width:100%;height:50px;margin-top:10px;}
	.edit-content{width:440px;margin-left:calc((100% - 400px)/2);min-height:400px;}
	.edit-header-text{width:100%;line-height:40px;text-align: center;font-size:14px;color:#2979ff;}
	.edit-header-text label{cursor: pointer;}
	.edit-header-content{width:100px;margin-left:calc((100% - 100px)/2);height:100px;border-radius: 50%;border:1px solid #eee;}
	.edit-header-box{width:100%;height:150px;margin-top:50px;}
	.home-list-box{width:96%;margin-left:2%;margin-top:20px;min-height:550px;}
	.home-mianbao-box{width:calc(100% - 10px);padding-left:10px;height:30px;margin-top:15px;border-bottom:1px solid #eee;font-size:14px;}
	.home-box{width:100%;height:100%;}
</style>


<script>
	var db = uniCloud.database();
	export default {
		name:"edit-userinfo",
		data() {
			return {
				showMobile:false,//是否显示修改手机号码弹窗
				showCrop:false,
				showMoney:false,//是否显示充值弹窗
				imageSrc: "",
				editNicknameDisabled:true,//默认未激活编辑状态
			};
		},
		props:['userinfo'],
		mounted() {
			var that = this;
			setTimeout(function(){
				if(!that.userinfo || !that.userinfo._id){
					uni.navigateTo({
						url:'/pages/index/index'
					})
				}
			},1000);
		},
		watch:{
			"userinfo"(val){
				if(!val || !val._id){
					uni.navigateTo({
						url:'/pages/index/index'
					})
				}
			}
		},
		methods:{
			//发起支付
			startPay(e){
				console.log('支付选项',e);
			},
			//关闭充值弹窗
			setCloseMoney(e){
				this.showMoney = e;
			},
			//弹出充值弹窗
			setShowMoney(){
				this.showMoney =true;
			},
			//点击了确认修改手机号码以后
			confirmUpdateMobile(e){
				var that = this;
				uni.showLoading({
					title:'修改中···'
				})
				if(e.success == true){
					if(e.mobile && this.userinfo._id){
						db.collection('uni-id-users').where({_id:this.userinfo._id}).update({mobile:e.mobile}).then(res=>{
							uni.hideLoading();
							uni.showToast({
								title:'修改成功',
								icon:'none',
								duration:2000
							})
							
							that.userinfo.mobile = e.mobile;
							
							uni.setStorage({
								key:'login-userinfo',
								data:that.userinfo
							})
							
						}).catch(err=>{
							uni.hideLoading();
						});
					}else{
						uni.showToast({
							title:'请先登录',
							icon:'none',
							duration:2000
						})
					}
					
				}
			},
			//点击了关闭修改手机号码弹窗
			setClose(e){
				this.showMobile = e;
			},
			//弹出编辑手机号码弹窗
			editMobile(){
				this.showMobile = true;
			},
			//子组件传过来的更新父组件的状态
			updateShowCrop(e){
				this.showCrop = e;
			},
			//裁剪并上传图片以后
			uploadSuccess(e){
				var that = this;
				var avatar = e.fileID;
				if(this.userinfo && this.userinfo._id){
					//修改头像
					db.collection('uni-id-users').where({_id:this.userinfo._id}).update({avatar:avatar}).then(res=>{
						this.userinfo.avatar = avatar;
						uni.setStorage({
							key:'login-userinfo',
							data:that.userinfo
						})
					});
				}
				
			},
			//编辑头像
			editAvatar(){
				var that = this;
				uni.chooseImage({
					count: 1, 
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						that.showCrop=true;
						that.imageSrc = res.tempFilePaths[0];
					}
				});
			},
			//失去焦点保存昵称
			saveEditNickname(){
				var that = this;
				var nickname = this.userinfo.nickname;
				var id = this.userinfo._id;
				if(nickname && id){
					uni.showLoading({
						title:'修改中···'
					});
					db.collection('uni-id-users').where({_id:id}).update({
						nickname:nickname
					}).then(res=>{
						uni.hideLoading()
						this.editNicknameDisabled = true;
						//更新缓存数据
						uni.setStorage({
							key:'login-userinfo',
							data:that.userinfo
						})
					});
				}
				
			},
			//编辑昵称
			editNickname(){
				this.editNicknameDisabled = false;
			}
		}
	}
</script>
